@mixin snap-details-map {
  // generated from d3 GeBu chromatic scale
  $color-country-default: rgb(247, 247, 247);
  $color-country-boundary: $color-x-light;

  .snapcraft-territories {
    position: relative;

    &__country {
      fill: $color-country-default;
    }

    &__boundary {
      fill: none;
      stroke: $color-country-boundary;
      stroke-width: 1px;
    }

    &__tooltip {
      @extend .p-tooltip--top-center; // sass-lint:disable-line placeholder-in-extend
      display: none;
      pointer-events: none; // little hack to make sure tooltip doesn't dissapear when it's hovered
      position: absolute;

      // override display of tooltip message so it's not only shown on hover of parent element
      .p-tooltip__message {
        align-items: center;
        display: flex;
        flex-direction: row;
        justify-content: center;
        min-width: auto;
      }
    }

    &__swatch {
      background-color: $color-country-default;
      border-radius: 50%;
      display: inline-block;
      height: $sp-medium;
      margin-right: $sp-x-small;
      vertical-align: middle;
      width: $sp-medium;
    }
  }
}
